<template>
	<div class="char-main" :style="props.style">
		<div ref="chartDom" class="chart" style="width: 100%; height: 100%" v-loading="isLoding"></div>
	</div>
</template>

<script setup lang="ts" name="account">
import { getTalentCapacity } from '/@/api/cx/list';
import * as echarts from 'echarts';
const props = defineProps({
	// 数据
	data: {
		type: [Object, String],
	},
	talentId: {
		type: [Number, String],
	},
	// 样式
	style: {
		type: String,
		default: 'width: 100%;height: 400px;',
	},
});
const chartDom = ref();
let myChart = null;
const isLoding = ref(false);
// 数据
const data = ref<any>([]);
function mapInit() {
	myChart = echarts.init(chartDom.value);
	let option: any = {};
	if (data.value.length > 0) {
		option = {
			tooltip: {
				trigger: 'item',
			},
			legend: {
				bottom: '5%',
				left: 'center',
			},
			series: [
				{
					name: '专利权利状态',
					type: 'pie',
					radius: ['40%', '70%'],
					avoidLabelOverlap: true,
					itemStyle: {
						borderColor: '#fff',
						borderWidth: 1,
						normal: {
							color: function (params) {
								// 预定义一个颜色数组
								var colorList = ['#55A0DB', '#5DD2A2', '#F9C662'];
								// 返回每个饼图扇区的颜色
								return colorList[params.dataIndex % colorList.length];
							},
						},
					},
					label: {
						alignTo: 'edge',
						formatter: '{name|{b}}\n{time|{c}({d}%)}',
						minMargin: 10,
						edgeDistance: 10,
						lineHeight: 30,
						rich: {
							time: {
								fontSize: 18,
								color: '#333',
							},
						},
					},
					emphasis: {
						label: {
							show: true,
							fontSize: 24,
							fontWeight: 'bold',
						},
					},
					labelLine: {
						length: 15,
						length2: 0,
						maxSurfaceAngle: 80,
					},
					labelLayout: function (params) {
						const isLeft = params.labelRect.x < myChart.getWidth() / 2;
						const points = params.labelLinePoints;
						points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width;
						return {
							labelLinePoints: points,
						};
					},
					data: data.value,
				},
			],
		};
	} else {
		option = {
			title: {
				text: '暂无数据',
				x: 'center',
				y: 'center',
				textStyle: {
					fontSize: 14,
					fontWeight: 'normal',
				},
			},
		};
	}

	option && myChart.setOption(option);
}
onMounted(() => {
	let param = {
		charts: 3,
		talentId: props.talentId,
	};
	isLoding.value = true;
	getTalentCapacity(param)
		.then((res) => {
			if (res.code == 0) {
				data.value = res.data || [];
				mapInit();
			}
		})
		.catch(() => {
			data.value = [];
			mapInit();
		})
		.finally(() => {
			isLoding.value = false;
		});
});
</script>

<style lang="scss" scoped>
.chart {
	height: 500px;
}
.char-main {
	position: relative;
	.s1 {
		position: absolute;
		top: -15px;
		right: 10px;
		color: #a4a0a0;
	}
}
</style>
